<template>
  <div>
      <div class="news-box">
        <div class="news">
          <div class="news-lists" 
              v-for="(item, index) in news" 
              :key="index"
              @click="gotoNews(item)">
            <div class="news-img">
              <img :src="item.pic" width="100%" height="100%"/>
            </div>
            <div class="content">
              <div class="right-title">{{item.title}}</div>
              <div class="right-desc">{{item.descript}}</div>
            </div>
          </div>
       </div>
      </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            news: []
        }
    },
    methods: {
        gotoNews(item) {
            this.$router.push({
                path: "/Finedetails",
                query: {
                    id: item.id
                }
            })
        }
    },
    mounted() {
        this.$API.getnewsList().then(res=> {
            // console.log(res.data.data)
            this.news = res.data.data
        })
    }
}
</script>

<style scoped>
.news-box {
  width: 100%;
  height: 5.1rem;
  overflow-x: scroll;
}
.news {
  width: 33rem;
  height: 5.2rem;
  display: flex;
  justify-content: space-between;
}
.news-lists {
  width: 6.5rem;
  height: 5.2rem;
  margin-left: 0.2rem;
  border-radius: 0.18rem;
  overflow: hidden;
}
.news-img {
  width: 100%;
  height: 4rem;
}
.right-title {
   font-size: 0.3rem;
   margin: 0.17rem 0;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
}
.right-desc {
   font-size: 0.25rem;
   color: #666;
   margin: 0.15rem 0;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
}
</style>